<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" @btnTitle="btnTitle" ref="nav"></detail-nav-bar>
    <scroll
      class="content2"
      ref="scroll"
      @srcollevent="srcollevent"
      :probeType="3"
    >
      <detail-swiper :img-swiper="ImgSwiper"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info
        :detail-info="detailInfo"
        @imgLoad="imgLoad"
      ></detail-goods-info>
      <detail-param-info :paramInfo="paramInfo" ref="param"></detail-param-info>
      <detail-comment-info
        ref="comment"
        :comment-info="commentInfo"
      ></detail-comment-info>
      <goods-list :goods="recommends" ref="recommends"></goods-list>
    </scroll>
    <detail-bottom-bar @btnCart="btnCart"></detail-bottom-bar>
      <backtop @click.native="btnclick" v-show="isShowbackTop"></backtop>
  </div>
</template>

<script>
import DetailNavBar from "../detail/childComps/DetailNavBar.vue";
import DetailSwiper from "../detail/childComps/DetailSwiper.vue";
import {
  getDetail,
  Goods,
  Shop,
  GoodsParam,
  getRecommend,
} from "../../network/detail";
import DetailBaseInfo from "../detail/childComps/DetailBaseInfo.vue";
import DetailShopInfo from "../detail/childComps/DetailShopInfo.vue";
import DetailGoodsInfo from "../detail/childComps/DetailGoodsInfo.vue";
import DetailParamInfo from "../detail/childComps/DetailParamInfo.vue";
import DetailCommentInfo from "../detail/childComps/DetailCommentInfo.vue";
import GoodsList from "../../components/content/goods/GoodsList.vue";
import { debounce } from "../../common/debounce";
import DetailBottomBar from "../detail/childComps/DetailBottomBar.vue"
import backtop from "../../components/content/backTop/backtop.vue";


import Scroll from "../../components/common/scroll/Scroll.vue";
export default {
  name: "Detail",
  data() {
    return {
      iid: null,
      ImgSwiper: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      positionArr: [],
      imgDebounce: {},
      postionY:0,
      currentIndex:0,
        isShowbackTop: false,
    };
  },
  created() {
    this.iid = this.$route.params.iid;

    getDetail(this.iid).then((res) => {
      const data = res.result;
      this.ImgSwiper = res.result.itemInfo.topImages;
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      this.shop = new Shop(data.shopInfo);
      this.detailInfo = data.detailInfo;
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );

      //获取评论
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0];
      }
    });
    getRecommend().then((res) => {
      this.recommends = res.data.list;
    });
    this.imgDebounce = debounce(() => {
      this.positionArr = [];
      this.positionArr.push(0);
      this.positionArr.push(this.$refs.param.$el.offsetTop);
      this.positionArr.push(this.$refs.comment.$el.offsetTop);
      this.positionArr.push(this.$refs.recommends.$el.offsetTop);
      console.log(this.positionArr);
    }, 300);
  },
  methods: {
    imgLoad() {
      this.$refs.scroll.refresh();
      this.imgDebounce();
    },
    debounce(func, wait) {
      let timer = null;
      return function (args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, wait);
      };
    },
    btnTitle(index) {
      this.$refs.scroll.scrollTo(0, -this.positionArr[index], 0);
    },
    srcollevent(position) {
      this.postionY=-position.y;
      let arrlength=this.positionArr.length;
      for(let i=0;i<arrlength;i++){
if( i!==this.currentIndex &&(( i<arrlength-1&& (this.postionY>=this.positionArr[i]&&this.postionY<this.positionArr[i+1]))
||( i===arrlength-1&& (this.postionY>=this.positionArr[i])))){
  this.currentIndex=i;
this.$refs.nav.current=this.currentIndex;
}
this.isShowbackTop = -position.y > 1000;
      }
    },
     btnclick() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
     btnCart(){
       console.log(this.goods.title);
        const  product={};
       product.image=this.ImgSwiper[0];
       product.title=this.goods.title;
       product.desc=this.goods.desc;
       product.price=this.goods.realPrice;
       product.iid=this.iid

       this.$store.dispatch('addCart',product).then((res)=>{
this.$toast.show(res);
       });
     }
  },
  mounted() {
    //加载防抖刷新
    const aaa = this.debounce(this.$refs.scroll.refresh, 300);
    this.$bus.$on("itemImageLoad2", () => {
      aaa();
    });
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList,
    DetailBottomBar,
    Scroll,
    backtop
  },
};
</script>

<style>
#detail {
  height: 100vh;
  position: relative;

  z-index: 9;
  background-color: #fff;
}
.content2 {
  /* position: absolute;
    top: 44px;
    bottom: 60px;
    right: 0; */
  height: calc(100% - 44px - 49px);
}
.detail-nav {
  position: relative;
  z-index: 9;
}
</style>